﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by aamir</title>
  
  <script type='text/javascript' src='Scripts/jquery-1.8.3.js'></script>
  <link rel="stylesheet" type="text/css" href="Styles/normalize.css">
  
  <!--<link rel="stylesheet" type="text/css" href="/css/result-light.css">-->
  
    
    
      <script type='text/javascript' src="Scripts/jquery.marquee.js"></script>
    
  
  <style type='text/css'>
    body {
  margin: 10px;
}

h1 {
  margin-bottom: 20px;
  border-bottom: 1px dotted #ccc;
  padding-bottom: 10px;
}

.marquee, .marquee-with-options {
  width: 300px;
  overflow: hidden;
  border:1px solid #ccc;
}
  </style>
  


<script type='text/javascript'>//<![CDATA[
    $(window).load(function () {
        $(function () {
            $('.marquee').marquee();
            $('.marquee-with-options').marquee({
                //speed in milliseconds of the marquee
                speed: 15000,
                //gap in pixels between the tickers
                gap: 50,
                //gap in pixels between the tickers
                delayBeforeStart: 0,
                //'left' or 'right'
                direction: 'left'
            });
        });
    });//]]>  

</script>


</head>
<body>
  <h2>Default options</h2>
		<div class='marquee'>Lorem ipsum dolor sit amet, consectetur adipiscing elit END.<br /> test new123<br /><br />test new 23434</div>

		<h2>Options as data attributes</h2>
		<div data-speed="6000" data-gap="30" data-direction="left" class='marquee'>Lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div>

		<h2>Options passed with javascript object</h2>
		<div class='marquee-with-options'>Lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div>
  
</body>


</html>

